<template> 
  <div class="register-box">
    <img class="logo-rz" src="../assets/img/logo-rz.png">
    <div class="main-content">
      <div class="input-box"><span><svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-diary-zhanghao"></use>
                </svg></span><input v-model="zhuCeName" id="account" type="text"></div>
      <div class="input-box"><span><svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-diary-password"></use>
                </svg></span><input v-model="zhuCeWords" id="password" type="password"></div>
    </div>
    <button class="submit" v-on:click="registerNew">注册</button>
    <div class="link-register">
      <p v-on:click="changeView">登录</p>
    </div>
  </div>
</template>
<script>
import Bus from "../assets/js/common/bus";
const regexName = new RegExp("^[0-9a-zA-Z\u4e00-\u9fa5_]{2,12}$");
const regexPassWord = new RegExp("(?=.*[0-9])(?=.*[a-zA-Z]).{6,30}");
export default {
  name: "rzRegister",
  data() {
    return {
      register_show: true,
      zhuCeName: "",
      zhuCeWords: ""
    };
  },
  props: {
    callback: {}
  },
  methods: {
    changeView() {
      this.$emit("registerShowOn", this.register_show);
    },
    registerNew() {
      // console.log(this.zhuCeName, this.zhuCeWords);
      // console.log(this.$md5("123456"));
      const app_key = "9F8943CA607331EB40EE1D01B720A01D";
      const app_secret =
        "osjSgu98tz79QFisU972YhIEgOc2NzetmPehplSUWW03jKQEOlyhJUCJYbnDlfD3";
      let zhuCeWordsMd5 = this.$md5(this.zhuCeWords);
      let app_sign =
        app_key +
        "" +
        zhuCeWordsMd5 +
        "App.User.Register" +
        this.zhuCeName +
        "" +
        app_secret;
      // console.log(app_sign);
      let appSignMd5 = this.$md5(app_sign).toUpperCase();
      // console.log(appSignMd5);
      this.zhuCeName =
        this.zhuCeName === undefined ? "" : this.zhuCeName.trim();
      this.zhuCeWords =
        this.zhuCeWords === undefined ? "" : this.zhuCeWords.trim();
      if (!this.zhuCeName.trim()) {
        this.$layer.open({
          content: "请填写用户名",
          skin: "msg",
          time: 2 //2秒后自动关闭
        });
        return false;
      }
      if (!regexName.test(this.zhuCeName.trim())) {
        this.$layer.open({
          content: "请填写用3到8位用户名",
          skin: "msg",
          time: 2 //2秒后自动关闭
        });
        return false;
      }
      if (!this.zhuCeWords.trim()) {
        this.$layer.open({
          content: "请填写密码",
          skin: "msg",
          time: 2 //2秒后自动关闭
        });
        return false;
      }
      if (!regexPassWord.test(this.zhuCeWords.trim())) {
        this.$layer.open({
          content: "密码太简单",
          skin: "msg",
          time: 2 //2秒后自动关闭
        });
        return false;
      }
      let that = this;
      this.$axios
        .get(
          "/api/?s=App.User.Register&username=" +
            this.zhuCeName +
            "&password=" +
            zhuCeWordsMd5 +
            "&app_key=" +
            app_key +
            "&sign=" +
            appSignMd5
        )
        .then(function(data) {
          console.log(data);
          if (data.status === 200 && data.data.data.err_code === 0) {
            that.$layer.open({
              content: "注册成功",
              skin: "msg",
              style: "background-color:#67d974; color:#fff;",
              time: 2 //2秒后自动关闭
            });
            setTimeout(() => {
              Bus.$emit("zcName", that.zhuCeName);
              that.$emit("registerShowOn", that.register_show);
            }, 2000);
          } else if (data.status === 200 && data.data.data.err_code === 1) {
            that.$layer.open({
              content: "该用户已经注册",
              skin: "msg",
              time: 2 //2秒后自动关闭
            });
          } else {
            return false;
          }
        })
        .catch(function(error) {
          self.fetchError = error;
        });
    },
    inputFocus() {
      let oHeight = $(document).height();
      $("input").focus(() => {
        $("body").css("height", oHeight);
        $(".log-main").css("height", oHeight);
      });
      $("input").blur(() => {
        $("body").css("height", "auto");
        $(".log-main").css("height", "100vh");
      });
    }
  },
  mounted() {
    this.inputFocus();
  }
};
</script>
